<template>
  <MainHeader
    title="收藏夹"
    bgUrl="https://jiangeges.oss-cn-heyuan.aliyuncs.com/front-end/star.png"
  >
  </MainHeader>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane name="star">
      <template #label>
        <span class="custom-tabs-label">
          <span><el-icon color="#05b5fa"><StarFilled /></el-icon>&nbsp;收藏</span>
        </span>
      </template>
      <BlogCard :list="list" :size="size" :total="total" @current="currentChange"/>
    </el-tab-pane>
    <el-tab-pane label="点赞" name="like">
      <template #label>
        <span class="custom-tabs-label">
          <span
            ><img
              width="14"
              height="14"
              src="../../assets/svg/heart.svg"
              alt="点赞"
            />&nbsp;点赞</span
          >
        </span>
      </template>
      <BlogCard :list="list" :size="size" :total="total" @current="currentChange"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import MainHeader from '@/components/MainHeader/index.vue';
import BlogCard from '@/components/BlogCard/index.vue';
import { queryLikeBlogList, queryStarBlogList } from '@/api/blog';
import { ElNotification } from 'element-plus';
import { Article } from '@/interface/blogs';
type ArticleAtHere = Article & { showToolTip: boolean };
const total = ref<number>(0);
const size = ref<number>(24);
const starCurrent = ref<number>(1);
const likeCurrent = ref<number>(1);
const list = ref<ArticleAtHere[]>([]);
const activeName = ref("star");
const handleClick = (tab: any) => {
  activeName.value = tab.paneName;
  getList()
};

onMounted(() => {
  getList();
});

const currentChange = (val: number) => {
  if (activeName.value === "star") {
    starCurrent.value = val;
  } else {
    likeCurrent.value = val;
  }
  getList();
};

const getList = async () => {
  try {
    let res: any;
    if (activeName.value === "star") {
      res = await queryStarBlogList(starCurrent.value, size.value);
    } else {
      res = await queryLikeBlogList(likeCurrent.value, size.value);
    }
    if (res?.status === 200) {
      total.value = res.data.total;
      list.value = res.data.blog;
    } else {
      ElNotification.error({
        title: "Failed",
        message: res?.message || "获取文章列表失败",
        offset: 100,
      });
    }
  } catch (error: any) {
    ElNotification.error({
      title: "Failed",
      message: "出错了：" + error.message,
      offset: 100,
    });
  }
};
</script>
<style lang="scss" scoped>
:deep(.el-tabs__nav-scroll) {
  max-width: 1080px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
}
@media screen and (min-width: 768px) {
}
</style>
